import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link, } from "react-router-dom";
import { Layout, Card, Skeleton, Row, Col, Empty } from "antd";
import { getWeChatMyHistoryDataApi, } from "../js/wechatmyhistoryapi.js";

const { Content, Sider } = Layout;
const echarts = require('echarts');


class WeChatMyHistory extends Component {

    constructor(props) {
        super(props);
        this.state = {

        };
    }


    render() {
        return (
            <Router basename="wechatmyhistory">
                <Layout style={{ backgroundColor: '#f5f5f5' }}>
                    <Content>
                        <Switch>
                            <Route path="/" component={WeChatMyHistoryMain} />
                        </Switch>
                    </Content>
                </Layout>
            </Router>
        );
    }
}

class WeChatMyHistoryMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schoolId: 0,
            userId: 0,
            identityId: 0,

            safetysceneNum: 0,
            safetysceneDealNum: 0,

            inspectData: [],

            confirmLoading: false,
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            confirmLoading: true,
        });

        let schoolId = this.getUrlParam("schoolId");
        let userId = this.getUrlParam("userId");
        let identityId = this.getUrlParam("identityId");

        this.setState({
            schoolId: schoolId,
            userId: userId,
            identityId: identityId,
        });

        getWeChatMyHistoryDataApi(schoolId, userId, identityId)
            .then((res) => {
                //得到整个页面的数据
                this.setState({
                    safetysceneNum: res.data.safetyscene.safetysceneNum,
                    safetysceneDealNum: res.data.safetyscene.safetysceneDealNum,

                    confirmLoading: false,
                });
                if (identityId == 7) {
                    this.setState({
                        inspectData: res.data.InspectNum,
                    })
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {

        let inspectCard = undefined;
        if (this.state.inspectData.length != 0) {
            inspectCard = this.state.inspectData.map((value, index) => {

                return (
                    <Card
                        title={value.className}
                        type="inner"
                        size="small"
                        className='innerConditionCard'
                        bodyStyle={{
                            padding: '12px',
                        }}>
                        <Row>
                            <div style={{ width: '100%', height: '300px', margin: '0 -4px', }}>
                                <ChartMyAllInspect chartData={value} that={this} />
                            </div>

                        </Row>
                        <Row>
                            <Col span={8} style={{ padding: 3 }}>
                                <div
                                    className='wechatMyHistoryDataCard'
                                    style={{ backgroundColor: 'rgb(233, 217, 211)', }}>
                                    <div className='title'>全部完成</div>
                                    <div className='data'>{value.AllDoneALL} </div>
                                </div>
                            </Col>
                            <Col span={8} style={{ padding: 3 }}>
                                <div
                                    className='wechatMyHistoryDataCard'
                                    style={{ backgroundColor: 'rgb(210, 208, 223)', }}>
                                    <div className='title'>部分完成</div>
                                    <div className='data'>{value.HalfDoneALL}</div>
                                </div>
                            </Col>
                            <Col span={8} style={{ padding: 3 }}>
                                <div
                                    className='wechatMyHistoryDataCard'
                                    style={{ backgroundColor: 'rgb(207, 218, 213)', }}>
                                    <div className='title'>未完成</div>
                                    <div className='data'>{value.NoDoneALL}</div>
                                </div>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={8} style={{ padding: 3 }}>
                                <div
                                    className='wechatMyHistoryDataCard'
                                    style={{ backgroundColor: 'RGB(251,208,229)', }}>
                                    <div className='title'>一切正常</div>
                                    <div className='data'>{value.AllPassALL}</div>
                                </div>
                            </Col>
                            <Col span={8} style={{ padding: 3 }}>
                                <div
                                    className='wechatMyHistoryDataCard'
                                    style={{ backgroundColor: 'RGB(161,195,191)', }}>
                                    <div className='title'>有异常</div>
                                    <div className='data'>{value.HaveTroubleALL}</div>
                                </div>
                            </Col>
                            <Col span={8} style={{ padding: 3 }}>
                                <div
                                    className='wechatMyHistoryDataCard'
                                    style={{ backgroundColor: 'rgb(255, 194, 105)', }}>
                                    <div className='title'>异常已处理</div>
                                    <div className='data'>{value.TroubleDealALL}</div>
                                </div>
                            </Col>
                        </Row>
                    </Card>
                )

            })
        } else {
            inspectCard = (<Empty />);
        }

        return (
            <div style={{ paddingBottom: '10px' }}>
                <Skeleton loading={this.state.confirmLoading} active>
                    <Card
                        title={'我的隐患数据'}
                        className='conditionCard'
                        bodyStyle={{
                            padding: '12px 16px',
                        }}>
                        <Row>
                            <Col span={12} style={{ padding: 3 }}>
                                <div
                                    className='wechatMyHistoryDataCard'
                                    style={{ backgroundColor: 'rgb(233, 217, 211)', }}>
                                    <div className='title'>我的上报</div>
                                    <div className='data'>{this.state.safetysceneNum}</div>
                                </div>
                            </Col>
                            <Col span={12} style={{ padding: 3 }}>
                                <div
                                    className='wechatMyHistoryDataCard'
                                    style={{ backgroundColor: 'rgb(210, 208, 223)', }}>
                                    <div className='title'>已处理</div>
                                    <div className='data'>{this.state.safetysceneDealNum}</div>
                                </div>
                            </Col>
                        </Row>
                    </Card>
                    {this.state.identityId == 7 ? (
                        <Card
                            title={'我的巡检数据'}
                            className='conditionCard'
                            bodyStyle={{
                                padding: '12px 16px',
                            }}>
                            {inspectCard}
                        </Card>
                    ) : null}
                </Skeleton>
            </div>
        )
    }

}

class ChartMyAllInspect extends Component {
    constructor(props) {
        super(props);

        this.state = {
            chartData: props.chartData,
            that: props.that,
        };
    }

    componentDidMount() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartMyAllInspect'));

            let dataZoom;

            if (this.state.chartData.date.length <= 3) {
                dataZoom = [{
                    type: 'inside',
                    start: 0,
                    end: 100,
                    zoomLock: true,
                }, {
                    type: 'slider',
                    start: 0,
                    end: 100,
                    zoomLock: true,
                    handleSize: 0,
                    // left: 'center',
                    // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    // handleSize: '80%',
                    // handleStyle: {
                    //     color: '#fff',
                    //     shadowBlur: 3,
                    //     shadowColor: 'rgba(0, 0, 0, 0.6)',
                    //     shadowOffsetX: 2,
                    //     shadowOffsetY: 2
                    // }
                }];
            } else {
                dataZoom = [{
                    type: 'inside',
                    start: (this.state.chartData.date.length - 3) / this.state.chartData.date.length * 100,
                    end: 100,
                    zoomLock: true,
                }, {
                    type: 'slider',
                    start: (this.state.chartData.date.length - 3) / this.state.chartData.date.length * 100,
                    end: 100,
                    zoomLock: true,
                    handleSize: 0,
                    // left: 'center',
                    // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    // handleSize: '80%',
                    // handleStyle: {
                    //     color: '#fff',
                    //     shadowBlur: 3,
                    //     shadowColor: 'rgba(0, 0, 0, 0.6)',
                    //     shadowOffsetX: 2,
                    //     shadowOffsetY: 2
                    // }
                }];
            }

            chart.setOption({
                // title: {
                //     text: '每月巡检数据分布情况',
                //     left: 'center'
                // },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['全部完成', '部分完成', '未完成', '一切正常', '有异常', '异常已处理'],
                    align: 'right',
                },
                grid: {
                    left: '5px',
                    right: '0px',
                    bottom: '40px',
                    top: '80px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.state.chartData.date,
                },
                yAxis: {
                    name: '计划数量',
                    type: 'value'
                },
                dataZoom: dataZoom,
                series: [{
                    name: '全部完成',
                    type: 'bar',
                    stack: '完成情况',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (e) {
                                if (e.data != 0) {
                                    return e.data;
                                } else {
                                    return '';
                                }
                            }
                        }
                    },
                    data: this.state.chartData.AllDone
                }, {
                    name: '部分完成',
                    type: 'bar',
                    stack: '完成情况',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (e) {
                                if (e.data != 0) {
                                    return e.data;
                                } else {
                                    return '';
                                }
                            }
                        }
                    },
                    data: this.state.chartData.HalfDone
                }, {
                    name: '未完成',
                    type: 'bar',
                    stack: '完成情况',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (e) {
                                console.log(e)
                                if (e.data != 0) {
                                    return e.data;
                                } else {
                                    return '';
                                }
                            }
                        }
                    },
                    data: this.state.chartData.NoDone
                }, {
                    name: '一切正常',
                    type: 'bar',
                    stack: '结果情况',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (e) {
                                console.log(e)
                                if (e.data != 0) {
                                    return e.data;
                                } else {
                                    return '';
                                }
                            }
                        }
                    },
                    data: this.state.chartData.AllPass
                }, {
                    name: '有异常',
                    type: 'bar',
                    stack: '结果情况',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (e) {
                                console.log(e)
                                if (e.data != 0) {
                                    return e.data;
                                } else {
                                    return '';
                                }
                            }
                        }
                    },
                    data: this.state.chartData.HaveTrouble
                }, {
                    name: '异常已处理',
                    type: 'bar',
                    stack: '结果情况',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (e) {
                                console.log(e)
                                if (e.data != 0) {
                                    return e.data;
                                } else {
                                    return '';
                                }
                            }
                        }
                    },
                    data: this.state.chartData.TroubleDeal
                }]

            });
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartMyAllInspect' style={chartStyle} />)
    }
}

export default WeChatMyHistory;
